<template>
  <div class="tab-content">
    <div v-for="(content,index) in contents" :key="content.title + ' ' + index" v-text="content.title"
         :class="content.classList" v-show="content.isShow"></div>
  </div>
</template>

<script>
export default {
  name: "LhzTabContent",
  data() {
    return {
      contents: [{
        'title': '商品介绍',
        'classList': ['show'],
        isShow: true
      }, {
        'title': '规格包装',
        'classList': ['hidden'],
        isShow: false
      }, {
        'title': '售后保障',
        'classList': ['hidden'],
        isShow: false
      }, {
        'title': '商品评价(66)',
        'classList': ['hidden'],
        isShow: false
      }, {
        'title': '手机社区',
        'classList': ['hidden'],
        isShow: false
      }],
    }
  },
  props: {
    tabIndex: {
      type: Number,
      default: 0
    }
  },
  watch:{
    tabIndex(newValue,oldValue){
      this.contents[oldValue].isShow = !this.contents[oldValue].isShow;
      this.contents[newValue].isShow = !this.contents[newValue].isShow;
    }
  }
}
</script>

<style scoped>
.tab-content {
  color: #666;
  background: #fff;
  position: absolute;
  top: 40px;
  padding: 30px;
  font-size: 66px;
}
</style>